<template>
  <div>
    <input type="text" v-model="user.id" />
    <input type="text" v-model="user.name" />
    <button @click="handleSubmit">提交</button>
    <ul>
      <li v-for="(item, index) in o.arr" :key="item.id" @click="handleDel(index)">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    // #1 渲染列表
    const o = reactive({
      arr: [
        {
          id: 0,
          name: 'ifer',
        },
        {
          id: 1,
          name: 'elser',
        },
        {
          id: 2,
          name: 'xxx',
        },
      ],
    })
    // #2 删除功能
    const handleDel = (index) => {
      // 注意一定不要忘记使用 reactive 包装对象，否则对数据的操作不是响应式的
      o.arr.splice(index, 1)
    }
    // #3 添加
    // #3.1 收集数据
    // 注意要想 v-model 实时收集数据，需要用 reactive 包一下变成响应式的对象
    const user = reactive({
      id: '',
      name: '',
    })
    // #3.2 添加数据
    const handleSubmit = () => {
      // 不要直接添加此对象，否则会相互影响
      // o.arr.push(user)
      o.arr.push({
        ...user,
      })
      /* o.arr.push({
        id: user.id,
        name: user.name,
      }) */
      // 把 user 给空对象，然后通过 newUser 接收
      /* const newUser = Object.assign({}, user)
      o.arr.push(newUser) */
      // 清空原数据
      user.id = ''
      user.name = ''
    }
    return {
      o,
      handleDel,
      user,
      handleSubmit,
    }
  },
}
</script>
